<template>
	<view class="goalSetting">
		<view>
			<h2 style="margin: 30rpx auto;">什么是目标?</h2>
			<text style="font-size: 30rpx;color: black;">目标可以是你一直想完成的创作目标，也可以是粉丝们一直期待你做的事情。将展示在你的个人主页，更好地激励粉丝赞助你。</text>
		</view>
		<view class="son">
			<h2>累计金额目标</h2>
			<view v-for="(goal, index) in Cumulative" :key="index">
				<goal :index="index" :placeholderCon="goal.placeholderCon" :showPerson="goal.showPerson"
					:showMon="goal.showPerson" @remove="removeGoal('Cumulative', index)"></goal>
			</view>
			<button style="background: #fff;color: #999;"
				@click="addGoal('Cumulative', '00.00', false,true)">增加金额目标</button>
		</view>
		<view class="son">
			<h2>当前发电人数</h2>
			<view v-for="(goal, index) in Current" :key="index">
				<goal :index="index" :placeholderCon="goal.placeholderCon" :showPerson="goal.showPerson"
					:showMon="goal.showPerson" @remove="removeGoal('Current', index)"></goal>
			</view>
			<button style="background: #fff;color: #999;" @click="addGoal('Current', '', true,false)">增加人数目标</button>
		</view>
		<view class="son">
			<h2>每月发电金额</h2>
			<view v-for="(goal, index) in Monthly" :key="index">
				<goal :index="index" :placeholderCon="goal.placeholderCon" :showPerson="goal.showPerson"
					:showMon="goal.showPerson" @remove="removeGoal('Monthly', index)"></goal>
			</view>
			<button style="background: #fff;color: #999;" @click="addGoal('Monthly', '', true,false)">增加金额目标</button>
		</view>
		<view style="background-color: #fff;padding: 30rpx;line-height: 90rpx;margin: 50rpx 0; ">
			<view style="display: flex; justify-content: space-between;align-items: center;">
				<text style="margin-right: 20rpx;">赞助方案金额计入目标</text>
				<u-switch  activeColor="#ff6600" v-model="value" @change="change"></u-switch>
			</view>
			<view style="display: flex; justify-content: space-between;align-items: center;">
				<text style="margin-right: 20rpx;">售卖商品金额计入目标</text>
				<u-switch activeColor="#ff6600"  v-model="value2" @change="changes"></u-switch>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Cumulative: [], // 用于存储子组件的状态
				Current: [], // 用于存储子组件的状态
				Monthly: [], // 用于存储子组件的状态
				value: false,
				value2: false,
				Sponsored:1,	
				Sales:2, 
			}
		},
		methods: {
			addGoal(type, placeholderCon, showPerson, showMon) {
				this[type].push({
					placeholderCon,
					showPerson,
					showMon
				});

			},
			removeGoal(type, index) {
				this[type].splice(index, 1);
			},
			change(e) {
				if(e){
					this.Sponsored=1
				}else{
					this.Sponsored=2
				}
				
			},
			changes(e) {
				if(e){
					this.Sales=1
				}else{
					this.Sales=2
				}
			},
		},
	}
</script>

<style>
	.goalSetting {
		width: 90%;
		margin: auto;
		letter-spacing: 1px;
	}

	.son {
		line-height: 120rpx;
		margin: 30rpx 0;
		padding-bottom: 36rpx;
		border-bottom: 1px solid #ccc;
	}
</style>